<template>
  <div id="app">
    <keep-alive :include="cachePages">
      <router-view/>
    </keep-alive>
    <van-overlay :show="show">
      <div class="error">
        <h2>
          项目仅支持手机预览,pc端请<b>F12打开模拟器</b>,然后再刷新!
        </h2>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['cachePages'])
  },
  mounted () {
    // 电脑预览
    if (this.isMobile()) {
      this.show = false
    } else {
      this.show = true
    }
  },
  methods: {
    isMobile () {
      const flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      )
      localStorage.setItem('ismobile', flag ? 1 : 0)
      return flag
    }
  }
}
</script>

<style lang="less">
.error{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  h2{
    color: #eee;
    letter-spacing: 2px;
    font-size: 12px;
    cursor: pointer;
    b{
      font-size: 14px;
      background: center rgb(236, 201, 149) url(./assets/img/error.gif);
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
      -webkit-user-drag: none;
    }
  }
}
</style>
